<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Upload CSV</title>
    <style>
        body{
            margin: 0; /* 去除默认边距 */
            background-color: black;
        }
       
        .content {
            width: 100%;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            overflow: hidden;
        }

        #content1 {
            background-color: transparent;
            height: 1000px;
        }

        #content2 {
            background-color: lightgreen;
            transform: translateX(-100%);
            transition: transform 0.5s ease;
            border-top-left-radius: 50px; /* 添加下方左边角的弧度 */
            border-top-right-radius: 50px; /* 添加下方右边角的弧度 */
        }


        .background-container {
            position: fixed; /* 固定定位，使容器不随页面滚动而移动 */
            top: 0;
            left: 0;
            width: 100%; /* 宽度充满整个视口 */
            height: 130%; /* 高度充满整个视口 */
            background: url('./static/ball.png') no-repeat center center;
            /* 兼容浏览器版本 */
            -webkit-background-size: cover;
            -o-background-size: cover;                
            background-size: cover;
            z-index: -1; /* 将容器置于页面底部，以便其他内容可以覆盖在其上 */
            opacity: 0.6;
        }

        /* 定义按钮的基础样式 */
        .smooth-button {
            position: relative;
            display: inline-block;
            padding: 10px 20px;
            font-size: 16px;
            color: #fff;
            background-color: rgba(0,123,255,0.7);
            border: none;
            border-radius: 5px;
            cursor: pointer;
            overflow: hidden;
            transition: background-color 0.3s ease;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            animation: ripple-effect 6s infinite;
        }

        /* 鼠标悬停时的样式 */
        .smooth-button:hover {
            background-color: rgba(0,86,179,0.7);
            transform: translateY(-2px);
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
        }

        /* 定义涟漪动画 */
        @keyframes ripple-effect {
            0% {
                box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3), 0 0 0 10px rgba(0, 123, 255, 0.2);
            }
            50% {
                box-shadow: 0 0 0 20px rgba(255, 255, 255, 0), 0 0 0 30px rgba(0, 123, 255, 0);
            }
            100% {
                box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3), 0 0 0 10px rgba(0, 123, 255, 0.2);
            }
        }


        /* 定义按钮的基础样式 */
        .smooth-button2 {
            position: relative;
            display: inline-block;
            padding: 10px 20px;
            font-size: 16px;
            color: #fff;
            background-color: rgba(0,123,255,0.7);
            border: none;
            border-radius: 5px;
            cursor: pointer;
            overflow: hidden;
            transition: background-color 0.3s ease;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            animation: color-change 3s infinite, ripple-effect2 3s infinite;
        }

        /* 鼠标悬停时的样式 */
        .smooth-button2:hover {
            background-color: rgba(0,86,179,0.7);
            transform: translateY(-2px);
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
        }

        /* 定义颜色变化动画 */
        @keyframes color-change {
            0% {
                background-color: rgba(0,123,255,0.7);
            }
            50% {
                background-color: rgba(237, 211, 211, 0.7);
            }
            100% {
                background-color: rgba(0,123,255,0.7);
            }
        }

        /* 定义涟漪动画 */
        @keyframes ripple-effect2 {
            0% {
                box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3), 0 0 0 10px rgba(0, 123, 255, 0.2);
            }
            50% {
                box-shadow: 0 0 0 20px rgba(255, 255, 255, 0), 0 0 0 30px rgba(0, 123, 255, 0);
            }
            100% {
                box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3), 0 0 0 10px rgba(0, 123, 255, 0.2);
            }
        }





        .motivational-text {
            font-size: 2em; /* 设置字体大小 */
            color: wheat; /* 设置字体颜色 */
            opacity: 0; /* 初始透明度为0 */
            transition: opacity 1s; /* 淡入动画时间 */
            position: absolute; 
            top: 380px; /* 从顶部偏移380px */
            left: 30px; /* 从左边偏移30px */
            text-align: center; /* 将文本内容居中对齐 */
            top: 30%; /* 从顶部偏移50% */
            left: 50%; /* 从左边偏移50% */
            transform: translate(-50%, -50%); /* 使用变换来精确居中 */
        }

        .motivational-text2 {
            font-size: 3em; /* 设置字体大小 */
            color: wheat; /* 设置字体颜色 */
            opacity: 0; /* 初始透明度为0 */
            transition: opacity 2s; /* 淡入动画时间 */
            position: absolute; 
            top: 380px; /* 从顶部偏移380px */
            left: 30px; /* 从左边偏移30px */
            text-align: center; /* 将文本内容居中对齐 */
            top: 40%; /* 从顶部偏移50% */
            left: 50%; /* 从左边偏移50% */
            transform: translate(-50%, -50%); /* 使用变换来精确居中 */
        }

        /* 隐藏原始的文件输入按钮 */
        input[type="file"] {
            display: none;
        }

        /* 自定义的文件选择按钮样式 */
        .custom-file-input {
            position: relative;
            display: inline-block;
            padding: 30px; /* 调整按钮大小 */
            text-align: center; /* 将文本内容居中对齐 */
            align-items: center; /* 垂直居中 */

            background-color: rgb(109, 158, 222); /* 不透明的蓝色背景 */
            color: #fff;
            font-family: Arial, sans-serif; /* 字体设置为白色 */
            font-size: 16px; /* 字体大小 */
            border: none;
            border-radius: 30%; /* 将按钮样式设置为圆形 */
            cursor: pointer;
            overflow: hidden; /* 隐藏按钮内的溢出内容 */
            outline: none;
            animation: ripple-effect 2s infinite; /* 初始涟漪动画 */
            opacity: 0.8;
        }

        /* 定义初始涟漪动画 */
        @keyframes initialRipple {
            0% {
                transform: scale(0);
                opacity: 0.2;
            }
            50% {
                transform: scale(1);
                opacity: 0.6;
            }
            100% {
                transform: scale(1.5);
                opacity: 0;
            }
        }

        /* 定义涟漪效果 */
        .custom-file-input::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            background-color: rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            transform: translate(-50%, -50%);
            transition: width 0.3s, height 0.3s, opacity 0.3s; /* 添加 opacity 过渡 */
            z-index: -1; /* 将涟漪效果放置在按钮下方 */
        }

        /* 鼠标悬停时触发涟漪效果 */
        .custom-file-input:hover::after {
            width: 200%; /* 涟漪效果扩展宽度 */
            height: 200%; /* 涟漪效果扩展高度 */
            opacity: 0; /* 悬停时，涟漪效果逐渐消失 */
        }

        /* 鼠标点击时触发涟漪效果 */
        .custom-file-input:active::after {
            background-color: rgba(255, 255, 255, 0.6); /* 改变涟漪颜色 */
        }


        /*特殊下划线按钮*/
        .hover-button {
            position: relative;
            display: inline-block;
            padding: 10px 20px;
            font-size: 16px;
            text-decoration: none;
            color: #333;
            border: none; /* 移除边框 */
            background: none; /* 确保没有背景 */
            transition: all 0.3s ease;
        }

        .hover-button::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 0;
            height: 2px;
            background-color: #333;
            transition: width 0.3s ease;
        }

        .hover-button:hover {
            transform: translateY(-3px);
        }

        .hover-button:hover::after {
            width: 100%;
        }


        .hover-button_dao {
            position: relative;
            display: inline-block;
            padding: 10px 20px;
            font-size: 16px;
            text-decoration: none;
            color: #333;
            border: none; /* 移除边框 */
            background: none; /* 确保没有背景 */
            transition: all 0.3s ease;
        }

        .hover-button_dao::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 0;
            height: 2px;
            background-color: white;
            transition: width 0.3s ease;
        }

        .hover-button_dao:hover {
            transform: translateY(-3px);
        }

        .hover-button_dao:hover::after {
            width: 100%;
        }

        /* 导航栏 */
        .navbar {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            background-color: #333;
            color: white;
            padding: 15px;
            text-align: center;
            transition: transform 0.3s ease;
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 1000;
            border-bottom-left-radius: 20px; /* 添加下方左边角的弧度 */
            border-bottom-right-radius: 20px; /* 添加下方右边角的弧度 */
            opacity: 0.7;

        }

        .navbar.hidden {
            transform: translateY(-100%);
        }


        /* 放提交按钮的 */
        .button-container {
            display: none;
            position: absolute;
            background-color: white;
            padding: 10px;
            border-radius: 10%;
            width: 240px;
            height: 340px;
            opacity: 0;
            transition: opacity 3s ease; /* 添加渐变动画效果 */
        }

        .show {
            display: block;
            opacity: 0.7;
        }


        .tutorial-container {
            position: absolute;
            top: 15%;
            left: 5%;
            width: 90%;
            height: 80%;
            background-color: white;
            border-top-left-radius: 20px; /* 添加下方左边角的弧度 */
            border-top-right-radius: 20px; /* 添加下方右边角的弧度 */
            border-bottom-left-radius: 20px; /* 添加下方左边角的弧度 */
            border-bottom-right-radius: 20px; /* 添加下方右边角的弧度 */

        }
        
        .gradient-wave-background {
            position: relative;
            width: 100%;
            height: 100vh;
            background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 25%, #fbc2eb 50%, #a6c1ee 75%, #d4fc79 100%);
            overflow: hidden;
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 1s ease-out, transform 1s ease-out;
        }

        .gradient-wave-background::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%23ffffff" fill-opacity="1" d="M0,64L60,96C120,128,240,192,360,213.3C480,235,600,213,720,176C840,139,960,85,1080,80C1200,75,1320,117,1380,138.7L1440,160L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z"></path></svg>');
            background-size: cover;
            opacity: 0.5;
        }

        .gradient-wave-background.show {
            opacity: 1;
            transform: translateY(0);
        }


        .tutorial_content_container {
            position: absolute;
        }

    </style>
</head>
<body>

    <div class="background-container"></div>

    <div class="navbar" id="navbar">
        <div><p, style="
            font-size: 25px;
            position: absolute;
            top: 70%; /* 从顶部偏移50% */
            left: 50%; /* 从左边偏移50% */
            transform: translate(-50%, -50%); /* 使用变换来精确居中 */
            color: white;
            ">啦啦啦
            </p></div>
        <div>
            <button>
                <a href="{{ url_for('index_page') }}" class="hover-button_dao", style="
                    position: absolute;
                    top:10%;
                    left: 5%;
                    color: white;            
                    " data-sound="./static/Speech_Assistant/home.wav">主页</a>
            </button>
            <button>
                <a href="{{ url_for('index_page') }}", class="hover-button_dao", style="
                    position: absolute;
                    top:10%;
                    right: 5%;
                    color: white;            
                    " data-sound="./static/Speech_Assistant/about.wav">关于我们</a>
            </button>
            <button>
                <a href="{{ url_for('index_page') }}", class="hover-button_dao", style="
                    position: absolute;
                    top:10%;
                    right: 15%;
                    color: white;            
                    " data-sound="./static/Speech_Assistant/add_credit.wav">充值服务</a>
            </button>
        </div>
    </div>

    <div class="content", id="content1",style="background-color: transparent;">
        
    <!-- 这里放置页面内容 -->
    <form action="{{ url_for('upload_file') }}" method="post" enctype="multipart/form-data">
        <label for="file" class="custom-file-input" style="
            position: absolute;
            text-align: center; 
            top: 70%; /* 从顶部偏移70% */
            left: 50%; /* 从左边偏移50% */
            transform: translate(-50%, -50%); 
            align-items: center;
            opacity: 0.7;
            text-align: center; /* 内容居中 */
        " data-sound="./static/Speech_Assistant/choose_file.wav">上传文件</label>
        <input type="file" id="file" name="file" accept=".csv">

        <div id="container1" class="button-container" style="
            position: absolute;
            top: 100%; 
            left: 15%; 
            padding: 20px; /* 设置内边距 */
            box-sizing: border-box; /* 确保padding不会影响容器尺寸 */
            text-align: center; /* 内容居中 */
        " data-sound="./static/Speech_Assistant/upload.wav">
            <p style="
                position: relative; 
                font-size: 20px; 
                font-weight: bold;
            ">
                报警关联分析
            </p>
            <button type="submit" name="action" value="alarm_association" class="hover-button" style="
                font-size: 20px;
                position: absolute;
                top: 70%; /* 从顶部偏移70% */
                left: 15%;
                align-items: center;
                font-weight: bold; /* 设置字体粗细 */
                font-family: Arial, sans-serif; /* 设置字体样式为圆滑的字体 */
            ">查看结果</button>
        </div>

        <div id="container2" class="button-container" style="
            top: 100%;  /* adjust this value based on where you want the container to appear */
            left: 35%; /* adjust this value based on where you want the container to appear */
            padding: 20px; /* 设置内边距 */
            box-sizing: border-box; /* 确保padding不会影响容器尺寸 */
            text-align: center; /* 内容居中 */
        ">
            <p style="
                position: relative; 
                font-size: 20px; 
                font-weight: bold;
            ">
                异常检测
            </p>
            <button type="submit" name="action" value="anomal_detection" class="hover-button" style="
                font-size: 20px;
                position: absolute;
                top: 70%; /* 从顶部偏移70% */
                left: 25%;
                align-items: center;
                font-weight: bold; /* 设置字体粗细 */
                font-family: Arial, sans-serif; /* 设置字体样式为圆滑的字体 */
            ">查看结果</button>
        </div>

        <div id="container3" class="button-container" style="
            top: 100%;  /* adjust this value based on where you want the container to appear */
            left: 55%; /* adjust this value based on where you want the container to appear */
            padding: 20px; /* 设置内边距 */
            box-sizing: border-box; /* 确保padding不会影响容器尺寸 */
            text-align: center; /* 内容居中 */
        ">
            <p style="
                position: relative; 
                font-size: 20px; 
                font-weight: bold;
            ">
                时间序列预测
            </p>
            <button type="submit" name="action" value="ts_predict" class="hover-button" style="
                font-size: 20px;
                position: absolute;
                top: 70%; /* 从顶部偏移70% */
                left: 22%;
                align-items: center;
                font-weight: bold; /* 设置字体粗细 */
                font-family: Arial, sans-serif; /* 设置字体样式为圆滑的字体 */
            ">查看结果</button>
        </div>

        <!-- 新添加的 container4 -->
        <div id="container4" class="button-container" style="
            top: 100%;  /* adjust this value based on where you want the container to appear */
            left: 75%; /* adjust this value based on where you want the container to appear */
            padding: 20px; /* 设置内边距 */
            box-sizing: border-box; /* 确保padding不会影响容器尺寸 */
            text-align: center; /* 内容居中 */
        ">
            <p style="
                position: relative; 
                font-size: 20px; 
                font-weight: bold;
            ">
                报警
            </p>
            <button type="submit" name="action" value="new_feature" class="hover-button" style="
                font-size: 20px;
                position: absolute;
                top: 70%; /* 从顶部偏移70% */
                left: 22%;
                align-items: center;
                font-weight: bold; /* 设置字体粗细 */
                font-family: Arial, sans-serif; /* 设置字体样式为圆滑的字体 */
            ">查看结果</button>
        </div>
    </form>

            
        <h1 class="titles motivational-text">为您服务</h1>
        <h2 class="titles motivational-text2">从您的数据开始：</h2>

        
        <div style="position: absolute; top: 90%; left: 50%; transform: translate(-50%, -50%); text-align: center;" >
            <p style="font-size: 1em; color: wheat; text-align: center; display: inline-block;">第一次使用？查看教程：</p>
            <button onclick="scrollToContent2()" class="smooth-button", style="
                border-radius: 50%;
                padding: 15px; /* 调整按钮大小 */
                width: 40px; /* 设置按钮宽度 */
                height: 40px; /* 设置按钮高度，保持正圆形 */
                opacity: 0.6;
                text-align: center;
                z-index: 9999; /* 确保按钮显示在其他内容之上 */
                background-color: lightblue;
                padding: 10px 10px;
                cursor: pointer;
            " data-sound="./static/Speech_Assistant/tutorials.wav">↓</button>
        </div>
    </div>
    <div class="content" id="content2", style="background-color:rgb(243, 232, 213);">
        <h2 style="position: absolute; 
                    top: 3%; left: 50%; 
                    transform: translate(-50%, -50%); 
        ">使用教程</h2>
        <p>This is the second content.</p>
        
        <div id="tutorial-container1" class="tutorial-container">
            <div id = "gradient-wave-background1" class="gradient-wave-background", style="
                position: absolute;
                top: 5%;
                left: 5%;
                width: 45%;
                height: 90%;
                ">
                <p> 这里后面放个视频 </p>
            </div>
            
            <div id = "tutorial_content_container1" class = "tutorial_content_container", style="
                position: absolute;
                top: 5%;
                left: 60%;
                width: 40%;
                height: 90%;
                padding: 20px;
                
                ">
                <p> 这是介绍 </p>

                <button onclick="play_tutorials()" class="smooth-button2" style="
                    border-radius: 50%;
                    padding: 0; /* 去掉内边距 */
                    width: 60px; /* 设置按钮宽度 */
                    height: 60px; /* 设置按钮高度，保持正圆形 */
                    opacity: 0.6;
                    text-align: center;
                    z-index: 9999; /* 确保按钮显示在其他内容之上 */
                    background-color: lightblue;
                    cursor: pointer;
                    display: flex; /* 使用flex布局 */
                    align-items: center; /* 垂直居中 */
                    justify-content: center; /* 水平居中 */

                    position: absolute;
                    bottom: 10%;
                    left: 40%; 
                    transform: translate(-50%, -50%); 
                ">
                    ▷|
                </button>


            </div>

                
        </div>
        
        
    </div>
    <div class="overlay" id="overlay"></div>

    <script>
        // 用于存储当前正在播放的音频对象
        let currentAudio = null;

        // 获取所有带有 data-sound 属性的元素
        const elements = document.querySelectorAll('[data-sound]');

        // 为每个元素添加鼠标悬停事件
        elements.forEach(element => {
            element.addEventListener('mouseenter', () => {
                // 如果有正在播放的音频，暂停并重置它
                if (currentAudio) {
                    currentAudio.pause();
                    currentAudio.currentTime = 0;
                }

                // 创建并播放新的音频对象
                const audio = new Audio(element.getAttribute('data-sound'));
                audio.play();

                // 更新当前播放的音频对象
                currentAudio = audio;
            });
        });
    </script>

</body>

<script>
    function scrollToContent2() {
            const content2 = document.getElementById('content2');
            content2.scrollIntoView({ behavior: 'smooth' });
        }
    function play_tutorials() {
        const audio = new Audio("./static/Speech_Assistant/tutorials_content1.wav");
        audio.play();
    }

    document.addEventListener("DOMContentLoaded", function() {

        document.querySelector('.motivational-text').style.opacity = '1';    
        // 延迟播放第二个文本的淡入动画
        setTimeout(function() {
            document.querySelector('.motivational-text2').style.opacity = '1';
        }, 1000); // 4秒延迟（与第一个动画的时间相同）


    });

    

    const content1 = document.getElementById('content1');
    const content2 = document.getElementById('content2');
    const gradientWaveBackground = document.querySelector('.gradient-wave-background');


    // 变量来跟踪content2的状态
    let content2Visible = false;
    let lastScrollPos = window.scrollY;


    let lastScrollTop = 0;
    const navbar = document.getElementById('navbar');

    // 监听滚动事件
    window.addEventListener('scroll', function() {
        const currentScrollPos = window.scrollY;
        // 向下滚动时
        if (currentScrollPos > lastScrollPos) {
            // 如果content2不可见且content1展示了50%以上，则显示content2
            if (window.scrollY + window.innerHeight > 1000) {
                content2.style.transform = 'translateX(0)';
                content2Visible = true;
                setTimeout(() => {
                    gradientWaveBackground.classList.add('show');
                }, 500); // 假设content2的动画持续1秒
            }
        } 
        lastScrollPos = currentScrollPos;


        let scrollTop = window.pageYOffset || document.documentElement.scrollTop;

            if (scrollTop > lastScrollTop) {
                // 向下滚动
                navbar.classList.add('hidden');
            } else {
                // 向上滚动
                navbar.classList.remove('hidden');
            }

        lastScrollTop = scrollTop <= 0 ? 0 : scrollTop; // For Mobile or negative scrolling



        var container1Shown = false;
        var container2Shown = false;
        var container3Shown = false;
        var container4Shown = false;

        var scrollPosition = window.scrollY;

        if (scrollPosition > 100 && !container1Shown) {
            var container1 = document.getElementById('container1');
            container1.classList.add('show');
            container1Shown = true;
        }

        if (scrollPosition > 200 && !container2Shown) {
            var container2 = document.getElementById('container2');
            container2.classList.add('show');
            container2Shown = true;
        }

        if (scrollPosition > 300 && !container3Shown) {
            var container3 = document.getElementById('container3');
            container3.classList.add('show');
            container3Shown = true;
        }

        if (scrollPosition > 400 && !container4Shown) {
            var container3 = document.getElementById('container4');
            container4.classList.add('show');
            container3Shown = true;
        }

        const scrollPosition2 = window.pageYOffset;
        const backgroundContainer = document.querySelector('.background-container');
        backgroundContainer.style.transform = 'translateY(' + -scrollPosition2 * 0.5 + 'px)';


    });
    
</script>
</html>
